<template>
  <div class="dashboard-editor-container">
    <div class="searchbox">
      <el-row>
        <el-card class="box-card">
          <div style="width: 100% ;height: 60px;display: flex ">
            <el-input
              v-model="searchWord"
              size="large"
              placeholder="请输入检索词"
              style="float: left"
            />
            <el-button size="large" style="margin-left: 1%; height: 60px;float:left;" @click="search">搜索图书</el-button>
          </div>
          <br>
          <el-radio-group v-model="searchBy" style="margin:10px 0">
            <el-radio label="name">书名</el-radio>
            <el-radio label="author">作者</el-radio>
            <el-radio label="number">书号</el-radio>
          </el-radio-group>
          <el-button v-if="!showResult" class="homebutton" @click="back">返回</el-button>
        </el-card>
      </el-row>
    </div>
    <div v-if="showResult" class="recommandbox">
      <div class="newbook boxitem">
        <el-row :gutter="5">
          <el-col v-for="(item, index) in newbook" :key="index" :span="6">
            <el-card :body-style="{ padding: '10px',float:left,}" class="bookcard" shadow="hover">
              <div class="bookimg">
                <img class="imgsrc" src="https://cdn2.hemacdn.com/img/5ea75616e256e87d779b3a89ab2c6b3d.jpg">
              </div>
              <div class="bookinfo">
                <div class="item"><span class="booktitle">书名：<a>{{ item.bookname }}</a></span></div>
                <div class="item"><span class="bookauthor">作者：<a>{{ item.bookauthor }}</a></span></div>
                <div class="item"><span class="bookhot">热度：<a>{{ item.bookhot }}</a></span></div>
                <div class="item"><span class="bookauthor">剩余数量：<a>{{ item.bookleft }}</a></span></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="hotbook boxitem">
        <el-row :gutter="5">
          <el-col v-for="(item, index) in hotbook" :key="index" :span="6">
            <el-card :body-style="{ padding: '10px',float:left }" class="bookcard" shadow="hover">
              <div class="bookimg">
                <img class="imgsrc" src="https://cdn2.hemacdn.com/img/5ea75616e256e87d779b3a89ab2c6b3d.jpg">
              </div>
              <div class="bookinfo">
                <div class="item"><span class="booktitle item">书名：<a>{{ item.bookname }}</a></span></div>
                <div class="item"><span class="bookauthor item">作者：<a>{{ item.bookauthor }}</a></span></div>
                <div class="item"><span class="bookhot item">热度：<a>{{ item.bookhot }}</a></span></div>
                <div class="item"><span class="bookauthor item">剩余数量：<a>{{ item.bookleft }}</a></span></div>
              </div>
            </el-card>
          </el-col>

        </el-row>
      </div>
    </div>
    <div v-if="!showResult" class="searchResult">
      <el-row v-for="(item, index) in searchResult" :key="index">
        <el-card class="resultitem">
          <div class="bookimg">
            <img class="imgsrc" src="https://cdn2.hemacdn.com/img/5ea75616e256e87d779b3a89ab2c6b3d.jpg">
          </div>
          <div class="bookinfo">
            <div class="item"><span class="booktitle">书名：<a>{{ item.bookname }}</a></span></div>
            <div class="item"><span class="bookauthor">作者：<a>{{ item.bookauthor }}</a></span></div>
            <div class="item"><span class="bookhot">热度：<a>{{ item.bookhot }}</a></span></div>
            <div class="item"><span class="bookauthor">剩余数量：<a>{{ item.bookleft }}</a></span></div>
            <div class="item"><span class="booklocation">位置：<a>{{ item.booklocation }}</a></span></div>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getHotBook, getNewBook, getBookByName, getBookByNumber, getBookByAuthor } from '@/api/book'

export default {
  name: 'DashboardReader',
  components: {},
  data() {
    return {
      searchWord: '',
      searchBy: 'name',
      newbook: [],
      hotbook: [],
      showResult: true,
      searchResult: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getNewBook().then(response => {
        this.newbook = response
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '获取新书数据失败！',
          type: 'error'
        })
      })
      getHotBook().then(response => {
        this.hotbook = response
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '获取最热图书数据失败！',
          type: 'error'
        })
      })
    },
    search() {
      const byName = {
        'bookname': this.searchWord
      }
      const byAuthor = {
        'bookauthor': this.searchWord
      }
      const byNumber = {
        'booknumber': this.searchWord
      }
      if (this.searchBy === 'name') {
        getBookByName(byName).then(response => {
          this.searchResult = response
        })
      } else if (this.searchBy === 'author') {
        getBookByAuthor(byAuthor).then(response => {
          this.searchResult = response
        })
      } else if (this.searchBy === 'number') {
        getBookByNumber(byNumber).then(response => {
          this.searchResult = response
        })
      }
      this.showResult = false
    },
    back: function() {
      this.showResult = !this.showResult
      this.getData()
      this.searchWord = ''
    },
    show: function() {
      if (this.searchWord) {
        // this.showResult = !this.showResult
      } else {
        this.$message({
          message: '请输入搜索词！',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  > > > .el-input__inner {
    height: 60px;
    font-size: 16px;
    text-align: left;
    margin-left: 0;
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  .bookinfo {
    float: left;
    padding-left: 10px;
    min-width: 121px;
    margin-top: 5px;
  }
  .bookimg{
    float:left;margin-bottom: 10px
  }
  .imgsrc{
    height: 150px;
    width: 105px;
  }
  .item{
    margin-bottom: 15px;
  }
  span{
    color: #777777;
  }
  span a{
    color: black;
  }
  .searchbox{
    margin-bottom: 15px;
  }
  .boxitem{
    margin-bottom: 15px;
  }
  .resultitem{
    margin-bottom: 10px;
  }
</style>
